[examples] Add Next.js 13 starter project #34983
Conversation
…l-ui; branch 'master' of https://github.com/mui-org/material-ui into master
mnajdova
added
examples
|
mnajdova
changed the title
| @@ -0,0 +1,29 @@ | |||
| 'use client'; | |||
There was a problem hiding this comment.
We shouldn't move forward with this PR before we are able to get rid of this directive. The layout shouldn't be a client component.
There was a problem hiding this comment.
A couple of thoughts:
- Server-side component is not the only benefit of using Next.js's beta app folder. They list 4 in https://nextjs.org/blog/next-13#new-app-directory-beta:
It could maybe make sense to provide a WIP demo. For example, to benefit from nested routes. Mantine as a WIP example mantinedev/mantine#2815 (comment). It could also resonate with https://mui.zendesk.com/agent/tickets/5883
we are hoping to use Next 13 with the app directory and layout.tsx files, to keep from having to retrofit the app after the fact
- We used the font logic to remove layout shifts in the examples [examples] Next.js examples v13 - fonts #34971. I guess we should do the same with our own docs?
- Server-side components can't use React.useContext, React.useState, React.useRef. So, let's say the issue is solve with emotion, we would also have to decide when the component needs to be client-side. There are cases, e.g. a button that could work server-side only even if it has a ton of hooks inside. So maybe, we will need to have a custom React.useState, React.useRef utils that do a no-op for these cases. https://twitter.com/olivtassinari/status/1601884631426633728
- Next.js not supporting the context for the server-side components doesn't make sense to me. Can I use Server Component with a global Context? vercel/next.js#42301 cover a bit of the problem. It feels like it was created in a bubble, without considering how real-life app constraints are. For a given request, a theme is static, a locale is static, etc.
There was a problem hiding this comment.
It feels like it was created in a bubble, without considering how real-life app constraints are. For a given request, a theme is static, a locale is static, etc.
Exactly!
There was a problem hiding this comment.
We shouldn't move forward with this PR before we are able to get rid of this directive. The layout shouldn't be a client component.
Per #34905 (comment), I think that it would be great to merge to have this demo, even if with use client. The /app folder has more to offer beyond server-side components.
|
It's been already added in a different PR. |
Related to #34905. The goal is to add a new example using Next.JS's app directory (with client components only).
TODOs & open questions I have:
React.contextis missing error needs to be fixed, see Next.js 13: SWC Emotion Transform Plugin Breaks with root layout Server Component inapp/vercel/next.js#41994. As a workaround I converted thelayout.jscomponent to client using the"use client"directive.ThemeProviderwith the custom theme? Should we create a custom App template for the client components adding it?roboto.classNameinside thelayout.jscomponent?